<script setup>
import {nextTick, ref} from 'vue'
import {useCommonStore} from '@/store/index'
import {listDocument} from '@/api/dashboard'
import ActiveNumber from "@/components/active-number/active-number.vue";

const commonStore = useCommonStore()
const navList = ref([{name: '中黄一号品种培育', id: 1, type: 'long'}])

const files = ref([])

function getData() {
  listDocument().then((res) => {
    files.value = res.rows
    while (files.value.length < 8) {
      files.value = files.value.concat(files.value)
    }
  })
}

getData()
setInterval(() => {
  getData()
}, import.meta.env.VITE_APP_INTERVAL)
const scroll = ref(null)
const timer = ref(null)

/*onMounted(() => {
  setTimer()
})
onBeforeUnmount(() => {
  nextTick(() => {
    clearInterval(timer.value)
    timer.value = null
  })
})*/

function open(e) {
  selectedFile.value = files.value.find((item) => item.id == e.target.dataset.id)
  popup.value.open()
}

const foster = ref(null)

function handleClick() {
  foster.value.open()
}

function setTimer() {
  timer.value = setInterval(() => {
    nextTick(() => {
      scroll.value.scrollTop += 1
      if (scroll.value.scrollTop >= 40 * (files.value.length - 3) + 2) {
        scroll.value.scrollTop = 2
      }
    })
  }, 200)
}

function handleMouseover() {
  clearInterval(timer.value)
  timer.value = null
}

function handleMouseout() {
  setTimer()
}

const popup = ref(null)
const selectedFile = ref({})
const classOptions = ref({
  limitMoveNum: 1,
  direction: 1,
  step: 0.2,
})
</script>

<template>
  <Item-Box title="茶品牌" class="right-top" :navList="navList" @click="handleClick">
    <div class="header">
      <img v-cover="commonStore.data[10]?.content"/>
      <p>{{ commonStore.data[11]?.content }}</p>
      <p>
        <active-number :value="commonStore.data[12]?.content"></active-number>
        {{ commonStore.data[12]?.unit }}
      </p>
    </div>
    <vue3ScrollSeamless
        class="list"
        :classOptions="classOptions"
        :dataList="files"
        @wheel.prevent=""
        @click="open"
    >
      <ul>
        <li class="text-clamp-one" v-for="(item, i) of files" :key="i" :data-id="item.id">{{ item.name }}</li>
      </ul>
    </vue3ScrollSeamless>

  </Item-Box>
  <Foster ref="foster"/>
  <Popup width="1335" height="780" ref="popup" :title="selectedFile.name">
    <div class="content">
      <div v-html="selectedFile.content"></div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>
.content {
  height: 600px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 25px;
  overflow: scroll;
}

.right-top {
  height: 301px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 20px;

  img {
    width: 80px;
  }

  p {
    color: #fff;

    &:nth-child(3) {
      font-size: 20px;
      color: #e6c404;
    }
  }
}

.list {
  width: 100%;
  margin-top: 16px;
  height: 182px;
  overflow-y: scroll;
  cursor: pointer;

  li {
    color: #fff;
    background-color: #042340;
    height: 40px;
    line-height: 40px;
    margin: 0 25px 10px 25px;
    border-left: 4px solid #1faaff;
    padding-left: 10px;
  }
}
</style>
